import React, { useState, useEffect, useRef } from 'react'
import { Table, Button, Modal, message } from 'antd';
import TheImage from '@/components/TheImage'
import TheQueryForm from '@/components/TheQueryForm'
import { goodsMemberNoticePage, goodsMemberNoticeNotify } from '@/api/goodsManagement/arrivalReminder.js';
import { goodsClassifyList } from '@/api/goodsManagement/goodsList.js';
import TheButton from "@/components/TheButton/index.jsx";

export default function ArrivalReminder() {
  const SearchFormRef = useRef()
  const columns = [
    {
      title: '商品ID',
      dataIndex: 'goodsId',
      key: 'goodsId',
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      width: 300,
    },
    {
      title: 'SKU图片',
      dataIndex: 'goodsImage',
      key: 'goodsImage',
      render: (text) => {
        return text ? <TheImage src={[text]} width={80} height={80}></TheImage> : '-'
      }
    },
    {
      title: '商品规格',
      dataIndex: 'goodsSkuName',
      key: 'goodsSkuName',
      render: (text) => {
        return text ? text : '-'
      }
    },
    {
      title: '库存数',
      dataIndex: 'stock',
      key: 'stock',
    },
    {
      title: '订阅会员数量',
      dataIndex: 'notifyMemberCount',
      key: 'notifyMemberCount',
    },
    {
      title: '操作',
      fixed: 'right',
      render(text, record, index) {
        return (
          <div>
            <TheButton haspermi={['goodsManagement:arrivalReminder:notify']} type="link" loading={record.btnLoading} onClick={() => getNotify(record, index)}>通知</TheButton>
          </div>
        )
      }
    },
  ]
  const searchOption = [
    {
      field: 'goodsName',
      label: '商品信息',
      placeholder: '商品ID/商品名称',
      type: 'Input',
    },
    {
      field: 'classifyId',
      label: '所属类目',
      placeholder: '请选择',
      type: 'Select',
      options: [],
      txt: 'goodsClassifyName',
      value: 'goodsClassifyId',
      api: goodsClassifyList,
      params: { level: '2' },
    },
    {
      field: 'goodsStatus',
      label: '状态',
      placeholder: '请选择',
      type: 'Select',
      options: [
        { value: 'Y', label: '上架' },
        { value: 'N', label: '下架' },
        { value: 'P', label: '平台方已下架' },
        { value: 'A', label: '申请上架中' }
      ]
    },
  ] //搜索项
  const [queryForm, setQueryForm] = useState({}) //搜索值
  const [dataSource, setDataSource] = useState([]); // 表格数据
  const [pageData, setPageData] = useState({ pageNo: 1, pageSize: 10, total: 0 }); //分页参数

  useEffect(() => {
    getData({ pageNo: pageData.pageNo, pageSize: pageData.pageSize })
  }, [])

  //数据处理
  const getData = async (value) => {
    await goodsMemberNoticePage({ ...value }).then(res => {
      if (res.code === 0) {
        setDataSource(res.data)
        setPageData({ pageNo: res.pageNo, pageSize: res.pageSize, total: res.totalCount })
      }
    })
  }
  // 搜索
  const onFormSearch = (values) => {
    setQueryForm({ ...values })
    getData({ pageNo: 1, pageSize: 10, ...values })
  }
  // 搜索重置
  const onReset = () => {
    getData({ pageNo: 1, pageSize: 10, })
    setQueryForm({})
  }
  //分页切换
  const pageChange = async (pageNo, pageSize) => {
    await getData({
      pageNo,
      pageSize,
      ...queryForm,
    }).then(() => {
      setPageData({
        pageNo,
        pageSize,
        total: pageData.total,
      })
    })
  }
  //发送通知
  const getNotify = (value, index) => {
    let params = {}
    if (value.goodsSkuId !== null) {
      params = { goodsId: value.goodsId, goodsSkuId: value.goodsSkuId, storeId: value.storeId }
    } else {
      params = { goodsId: value.goodsId, storeId: value.storeId }
    }
    loadingSet(index, true)
    Modal.confirm({
      title: '提醒',
      content: '您确定发送到货提醒通知嘛？',
      onOk: async () => {
        await goodsMemberNoticeNotify({ ...params }).then((res) => {
          if (res.code === 0) {
            message.success('发送成功')
            pageChange(1, 10)
          }
          loadingSet(index, false)
        })
      },
      onCancel: () => {
        loadingSet(index, false)
      }
    })
  }
  //表格按钮loading防连点
  const loadingSet = (index, flag) => {
    dataSource[index].btnLoading = flag
    setDataSource([...dataSource])
  }
  return (
    <div className='wrap-box wrap-box-content'>
      <TheQueryForm ref={SearchFormRef} option={searchOption} show onGetValues={(values) => onFormSearch(values)}
        onReset={(values) => onReset(values)}>
      </TheQueryForm>
      <Table bordered columns={columns} dataSource={dataSource} rowKey={(r) => r.id} pagination={{
        onChange: pageChange,
        position: ['bottomCenter'],
        current: pageData.pageNo,
        pageSize: pageData.pageSize,
        total: pageData.total,
        showSizeChanger: false
      }} />
    </div>
  )
}
